<template>
  <div class="form-subform-preview">
    <div class="form-preview-group">
      <label>
        {{ _displayName }}
        <span class="form-preview-notNull" v-if="field.isNull == 0">*</span>
      </label>
      <div class="form-preview-mock">
        <span class="form-type-text">{{subFormMark}}</span>
      </div>
    </div>

    <div class="form-subform-preview-content">
      <!-- start 关联显示字段 -->
      <div class="form-subform-preview-title">{{subFormPreviewTitle}}</div>
      <div class="form-preview">
        <div
          class="form-design-preview"
          v-for="item in productRelatedFields"
          :key="item.fieldName"
        >
          <div class="form-preview-group">{{ returnDisplayName(item) }}</div>
        </div>
      </div>
      <!-- end 关联显示字段 -->

      <!-- start 系统字段 -->
      <div class="form-subform-preview-title">{{subFormPreviewTitleSystem}}</div>
      <form-design-preview
        v-if="notProductRelatedSystemFields.length"
        v-model="notProductRelatedSystemFields"
        :validate="validate"
        :draggableGroup="{
          name: 'productSystem',
          pull: false,
          put: false
        }"
        :parentFieldId="field.fieldName"
        :disabled="isDisabledPreview"
        @dragValChange="dragValChange"/>
      <!-- end 系统字段 -->

      <!-- start 自定义显示字段，先简单实现，后续有空再与系统字段合并~ -->
      <div class="form-subform-preview-title">{{subFormPreviewAttribute}}</div>
      <form-design-preview
        v-if="notProductRelatedCustomFields.length"
        v-model="notProductRelatedCustomFields"
        :validate="validate"
        :parentFieldId="field.fieldName"
        :draggableGroup="{
          name: 'productCustom',
          pull: false,
          put: true
        }"
        :disabled="isDisabledPreview"
        @dragValChange="dragValChange"/>
      <div v-else class="sub-preview-empty-show"></div>
      <!-- end 自定义显示字段 -->

      <!-- <div class="form-subform-preview-placeholder">{{ placeHolder }}</div> -->
    </div>
  </div>
</template>

<script>
/* props */
import { previewProps } from '@src/component/form/components/props';
/* mixin */
import FormSubFormMixin from '@src/component/form/mixin/form.subForm';

// import FormDesignPreview from '@src/component/form/FormDesignPreview'
import translate from '@src/component/form/mixin/translate.js'
import { transformI18n } from '@src/locales'

export default {
  name: 'form-product-preview',
  mixins: [FormSubFormMixin, translate],
  props: previewProps,
  computed: {
    /** 产品关联系统字段 */
    productRelatedFields: {
      get() {
        return this.subformFields.filter(field => field.formType === 'relateProduct');
      },
      set(value) {
        let subFormFieldList = [
          ...value,
          ...this.notProductRelatedSystemFields,
          ...this.notProductRelatedCustomFields
        ]
        // this.update(subFormFieldList, 'subFormFieldList');
        this.$set(this.field, 'subFormFieldList', subFormFieldList)
      }
    },
    /**非产品关联系统字段 */
    notProductRelatedSystemFields: {
      get() {
        return this.systemFields.filter(field => field.isSystem == 1 && field.formType !== 'relateProduct');
      },
      set(value) {
        let subFormFieldList = [
          ...this.productRelatedFields,
          ...value,
          ...this.notProductRelatedCustomFields
        ];
        // this.update(subFormFieldList, 'subFormFieldList');
        this.$set(this.field, 'subFormFieldList', subFormFieldList)
      }
    },
    notProductRelatedCustomFields: {
      get() {
        return this.customFields.filter(field => field.isSystem == 0 && field.formType !== 'relateProduct')
      },
      set(value) {
        let subFormFieldList = [
          ...this.productRelatedFields,
          ...this.notProductRelatedSystemFields,
          ...value,
        ]
        // this.update(subFormFieldList, 'subFormFieldList');
        this.$set(this.field, 'subFormFieldList', subFormFieldList)
      }
    },

    subFormMark(){
      return transformI18n('common.form.type.subForm', this.formPreviewLocale)
    },
    subFormPreviewTitle(){
      return transformI18n('common.base.concatField', this.formPreviewLocale)
    },
    subFormPreviewTitleSystem(){
      return transformI18n('common.form.systemWidget', this.formPreviewLocale)
    },
    subFormPreviewAttribute(){
      return transformI18n('common.form.displayField', this.formPreviewLocale)
    }
  },
  inject: {
    isDisabledPreview: {
      default: false
    }
  },
  components: {
    // 组件循环引用报错，改用import
    FormDesignPreview: () => import('@src/component/form/FormDesignPreview')
  },
};
</script>

<style lang="scss" scoped>
@import '@src/component/form/components/FormSubForm/FormSubForm.scss';
.sub-preview-empty-show {
  min-height: 62px;
  padding: 8px 12px 12px;
  background: none;
}
::v-deep .form-design-preview-disabled {
  border-color: #F0F0F0 !important;
}
</style>
